<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="searchForm.name" placeholder="输入菜单名" clearable @clear="search()"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="prepareAddMenu">新增</el-button>
      <el-table
        :data="menuTree"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          prop="name"
          label="菜单名称"
          sortable>
        </el-table-column>
        <el-table-column
          prop="url"
          label="访问路径"
          sortable>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
          <template slot-scope="scope">
            <el-switch @change="updateStatus(scope.row.id,scope.row.status)"
                       v-model="scope.row.status===1?true:false">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-tooltip content="编辑" placement="top">
              <el-button type="text" @click="prepareModifyMenu(scope.row)">编辑</el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button type="text" @click="deleteMenu(scope.row)">删除</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      title="新增菜单"
      :visible.sync="addMenuDialogVisible"
      width="30%"
      :before-close="addMenuDialogClose" :close-on-click-modal="false">
      <el-form ref="addMenuRef" :model="addMenuForm" :rules="addMenuFormRules" label-width="80px">
        <el-form-item label="菜单名" prop="name">
          <el-input v-model="addMenuForm.name"></el-input>
        </el-form-item>
        <el-form-item label="访问url" prop="url">
          <el-input v-model="addMenuForm.url"></el-input>
        </el-form-item>
        <el-form-item label="父菜单" prop="parentId">
          <el-tree
            :data="allMenuTree"
            show-checkbox
            node-key="id"
            :check-strictly="true"
            @check="handleCheck"
            :default-checked-keys="[addMenuForm.parentId]"
            :props="defaultProps">
          </el-tree>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="addMenuForm.status" placeholder="请选择">
            <el-option
              v-for="item in addMenuFormPrepareData.status" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="addMenuDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveMenu()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Menu",
  data () {
    return {
      addMenuFormPrepareData: {
        status: [{
          label: "启用",
          value: 1
        }, {
          label: "禁用",
          value: -1
        }]
      },
      menuTree: [],
      allMenuTree: [], // 菜单树
      searchForm: {
        name: ''
      },
      addMenuDialogVisible: false,
      addMenuDialogTitle: "",
      operatorMenu: '',
      addMenuForm: {
        id: '',
        name: '',
        url: '',
        parentId: '',
        status: 1
      },
      addMenuFormRules: {
        name: [
          { required: true, message: '请输入菜单名', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入url', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      },
      defaultProps: {
        children: 'children',
        label: 'name',
      }
    }
  },
  created () {
    this.queryMenuTree()
    this.queryAllMenuTree()
  },
  methods: {
    queryMenuTree () {
      this.$http.post('/menu/tree').then((response) => {
        this.menuTree = response.data
      }).catch((error) => {
      })
    },
    queryAllMenuTree () {
      this.$http.post('/menu/tree/all').then((response) => {
        this.allMenuTree = response.data
      }).catch((error) => {
      })
    },
    search () {
      this.$http.post('/menu/tree',this.searchForm).then((response) => {
        this.menuTree = response.data
      }).catch((error) => {});
    },
    saveMenu() {
      this.$refs.addMenuRef.validate((valid) => {
        if (valid) {
          if(this.operatorMenu === 'add'){
            this.$http.post("menu/addMenu", this.addMenuForm).then(response => {
              this.$message.success("新增菜单成功");
              this.addMenuDialogVisible = false;
              this.$refs.addMenuRef.resetFields();
              this.search();
            }).catch(error => {})
          }else if(this.operatorMenu ==='modify'){
            this.$http.post("menu/updateMenu", this.addMenuForm).then(response => {
              this.$message.success("修改菜单成功");
              this.addMenuDialogVisible = false;
              this.$refs.addMenuRef.resetFields();
              this.search();
            }).catch(error => {})
          }

        }
      })
    },
    prepareModifyMenu(menu) {
      this.operatorMenu = 'modify'
      this.addMenuForm  = {...menu};
      this.addMenuDialogVisible = true
      this.addMenuDialogTitle= '修改菜单'
    },
    deleteMenu(row) {
      const ids = []
      ids.push(row.id)
      this.$confirm(`确认删除[${row.name}]该菜单吗？`)
        .then(() => {
          this.$http.post(`/menu/delMenu`,ids).then(response => {
            this.$message.success("删除菜单成功");
            this.search();
          }).catch(error => {})
        })

    },
    addMenuDialogClose() {
      this.addMenuDialogVisible = false;
    },
    prepareAddMenu() {
      this.operatorMenu = 'add'
      this.addMenuDialogTitle = "新增菜单";
      this.addMenuDialogVisible = true;
    },
    reset() {
      this.$refs.searchForm.resetFields();
      this.search()
    },
    handleCheck(data, checked, indeterminate) {
      if(checked.checkedKeys.length > 1) {
        this.$message.error("只能选择一个父菜单");
        return;
      }
      this.addMenuForm.parentId = checked.checkedKeys[0];
    },
    updateStatus(id, status) {
      if (status === 1) {
        status = 0;
      } else if (status === 0) {
        status = 1;
      }
      this.$http.post(`/menu/updateMenuStatus`, { ids:[id], status: status }).then(response => {
        this.$message.success("更新状态成功");
        this.search();
      }).catch(error => {})
    },
  },
}
</script>

<style scoped>
/* 添加一些样式 */
.box-card {
  margin-top: 20px;
}
</style>
